<account-topbar theme="light"></account-topbar>

<div class="account-box">
  <div style="width: 500px; padding: 10px; margin: 0 auto; background: white;">
    <div class="d-flex align-items-center mb-lg">
      <h1 class="pl-sm mb0 border-primary h3" style="">
        手机找回
      </h1>
      <span class="pl-md text-xs">我们不会向第三方泄露您的信息</span>
    </div>

    <form nz-form [formGroup]="findMobile" (ngSubmit)="submit()" se-container="1"
      style="margin-left: 16px; margin-right: 16px">
      <se labelWidth="100" label="手机号码" extra="">
        <input nzSize="large" style="width: 280px;" formControlName="mobile" nz-input placeholder="输入账号绑定的密保手机号码" />
      </se>
      <se labelWidth="100" label="验证码">
        <nz-row [nzGutter]="8">
          <nz-col [nzSpan]="11">
            <input nz-input autocomplete="off" formControlName="captcha" nzSize="large" placeholder="输入短信验证码" />
          </nz-col>
          <nz-col [nzSpan]="8">
            <captcha-btn [disabled]="findMobile.controls.mobile.invalid" size="large" (send)="sendCaptcha($event)">
            </captcha-btn>
          </nz-col>
        </nz-row>
      </se>
      <div style="width: 100%; text-align: center;">
        <button nz-button nzBlock nzType="primary" style="width: 50%" nzSize='large'
          [disabled]="findMobile.invalid">重置密码</button>
      </div>
      <div class="mt-md" style="width: 100%; text-align: center;">
        <a routerLink="/" class="brand-color" style="font-size: 16px;">转到登录页面？</a>
      </div>
    </form>

  </div>
</div>
